<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <!-- v-bind 就是绑定属性用的，v-bind:title='js表达式' -->
        <!-- 当 isActive 为真的时候 active 这个类就会被添加，是 false 则该 class 不会生效 -->
        <div :class="{active: isActive, box: true}">忘记一个很简单-不要见-不要贱</div>
        <!-- 如果 class 已经有了，那么 vue 会将其进行合并起来 -->
        <div class="aaa" :class="{active: isActive}">你笑起来真好看</div>

        <!-- 通过对象绑定 class -->
        <div :class="classObj">通过对象绑定 class</div>

        <div :class="classArr">通过数组来绑定 class</div>
        <!-- ---------------------------------------- -->
        <hr>

        <div :style="colorRed"> 样式绑定 </div>
        <div :style="styleObj"> 样式对象绑定 </div>
        <div :style="[colorRed,styleObj]">通过数组绑定</div>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                abc: 'cba',
                isActive: true,
                classObj: {
                    active: false,
                    box: true
                },
                classArr: ['box', 'active'],
                colorRed: 'color: red',
                styleObj: {
                    color: 'red',
                    // fontSize: '30px',
                    'font-size': '30px'
                }
            }
        },
    })
    app.mount('#app')
</script>

</html>